﻿<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>vue.Canvas</title>
    <meta charset="utf-8" />
    <link href="../Content/font-awesome.min.css" rel="stylesheet" />
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <script src="../Scripts/vue.js"></script>
    <script src="../Scripts/jquery-3.0.0.min.js"></script>
    <style type="text/css">
        .panel-body div > span {
            display: inline-block;
            width: 30%;
        }
    </style>
</head>

<body class="container-fluid">
    <div id="test" style="font-family:'Arial Unicode MS'" v-on:rebuild:="rebuild()">
        <v-canvas src="../Images/1.jpg" class="myCanvas" width="400px" height="300px" v-bind:tools="tools"></v-canvas>
        <div class="panel">
            <div class="panel-heading">
                定制工具栏
            </div>
            <div class="panel-body">
                <div>
                    <span>
                        <input type="checkbox" id="mouse" checked="checked" />
                        <label for="mouse">鼠标</label>
                    </span>
                    <span>
                        <input type="checkbox" id="pencil" checked="checked" />
                        <label for="pencil">画笔工具</label>
                    </span>
                    <span>
                        <input type="checkbox" id="size" checked="checked" />
                        <label for="size">画笔粗细</label>
                    </span>
                    <span>
                        <input type="checkbox" id="text" checked="checked" />
                        <label for="text">文字工具</label>
                    </span>
                    <span>
                        <input type="checkbox" id="color" checked="checked" />
                        <label for="color">颜色工具</label>
                    </span>
                    <span>
                        <input type="checkbox" id="bgColor" checked="checked" />
                        <label for="bgColor">背景色工具</label>
                    </span><span>
                        <input type="checkbox" id="eraser" checked="checked" />
                        <label for="eraser">橡皮檫</label>
                    </span> <span>
                        <input type="checkbox" id="undo" checked="checked" />
                        <label for="undo">撤销</label>
                    </span>
                    <span>
                        <input type="checkbox" id="redo" checked="checked" />
                        <label for="redo">重做</label>
                    </span><span>
                        <input type="checkbox" id="clear" checked="checked" />
                        <label for="clear">清除</label>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <script src="../lib/vue.Canvas.js" charset="utf-8" type="text/javascript"></script>
    <script type="text/javascript">
        var app = new Vue({
            el: "#test"
            , data: {
                tools: ["mouse", "pencil", "size", "text", "color", "bgColor", "eraser", "undo", "redo", "clear", "minimize"]
            }
        })
    </script>

    <script type="text/javascript">
        $("input[type=checkbox]").change(function () {
            //查找用于初始化的元素/Element/对象
            var $c = $(".myCanvas");
            var ckd = [];
            //获取已选工具
            $("input[type=checkbox]:checked").each(function () {
                var v = this.id;
                ckd.push(v);
            });
            Vue.set(app, "tools",(ckd));
        })
    </script>
</body>

</html>